[小ネタ]Chrome拡張でGitHubのコードの幅を広げる

GitHub上でコードレビューを行う際、もうちょっと幅が広いとありがたいなと思ったことはないでしょうか？

幅を広げるため、これまでは「Widescreen for GitHub」というChrome拡張を使っていました。しかし、最近のGitHubのアップデートによりサイトの構造が変わったのか、2019年7月29日現在ではコード幅がうまく広がらなくなってしまいました。

そこで、CSSをいじくってなんとかしようというのが、本エントリです。

やり方

先日弊社の稲葉が書いた記事を参考に「Stylus」Chrome拡張をインストールし、カスタムCSSを設定できるようにしてください。

そして、以下のCSSを追加します。

/* 全体の幅 */
.container-lg {
    max-width: calc(100% - 40px);
    
}
/* コメント用 */
.comment-holder, .inline-comments .inline-comment-form, .inline-comments .inline-comment-form-container, .timeline-new-comment {
    max-width: calc(100%);
}

Before & After

CSS適用前がこちら

適用後がこちら

画面いっぱいに広がっているのがわかりますね。

まとめ

特定用途のChrome拡張は便利ですが、サイトデザイン変更にすぐ追従されないこともよくあります。そんな時でもあきらめず、代替する手は案外あるので、みんなでGitHub生活をエンジョイしていきましょう！